<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
    计算属性-很聪明，会缓存
模板中的表达式虽然方便，但也只能用来做简单的操作。
如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。
因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。
   -->
    <div id="box">
        欢迎{{name}}回来

        <!-- 假如有个需求，要把name改成第一个字母大写显示，可以这样写,  但不优雅 -->
        <p>
            欢迎{{name.substring(0,1).toUpperCase()+name.substring(1)}}回来
        </p>
        <!-- 可以用计算属性 写,注意不加小括号firstName()，是计算属性，不是方法-->
        <p>计算属性-欢迎{{firstName}}回来</p>
        <p>方法-欢迎{{mefirstName()}}回来</p>
    </div>
    <script>
        var obj = {
            data() {
                return {
                    name: 'abcd',
                    age: 18
                }
            },
            methods: {
                mefirstName() {
                    return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
                }
            },
            // 计算属性
            // 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
            // 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
            computed: {
                firstName() {
                    return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
                }
            },
        }
        var app = Vue.createApp(obj).mount('#box')
    </script>
</body>

</html>